<template>
	<el-dialog title="接口详情" width="600" v-model="visible" :close-on-click-modal="false" :destroy-on-close="true" draggable>
		<div class="attribute-talbe">
			<table class="av-talbe stock-table">
				<tr v-for="(item, key) in state.ruleForm" :key="key">
					<td class="first-column">{{ filterName(key) }}</td>
					<td class="second-column" v-if="filterName(key) === '服务状态'">
						<el-tag :type="item == '1' ? 'success' : 'info'">{{ item == '1' ? '上线' : '下线' }}</el-tag>
					</td>
					<td class="second-column" v-else @click="copyText(filterName(key), item)">{{ item }}</td>
				</tr>
			</table>
		</div>
	</el-dialog>
</template>

<script setup lang="ts" name="layerDialog">
// import { useI18n } from 'vue-i18n';
import { reactive, ref, nextTick } from 'vue';
import { getDetails } from '/@/api/communal/interface.ts';

import { useMessage } from '/@/hooks/message';
// 定义子组件向父组件传值/事件
// const emit = defineEmits(['refresh']);
// const { t } = useI18n();
// 引入组件

// 定义变量内容
const visible = ref(false);
const detailDialogRef = ref();
// 定义需要的数据
const state = reactive({
	ruleForm: {
		interfaceName: '',
		method: '',
		requestUrl: '',
		requestBody: '',
		responseBody: '',
		remarks: '',
		createTime: '',
		servicesStatus: '',
	},
});

// 打开弹窗
const openDialog = (type: string, row?: any) => {
	visible.value = true;
	getDetails({ interfaceId: row }).then((res: any) => {
		const filteredData = Object.keys(res.data)
			.filter((key) => Object.hasOwnProperty.call(state.ruleForm, key))
			.reduce((obj: any, key: any) => {
				obj[key] = res.data[key];
				return obj;
			}, {});

		state.ruleForm = filteredData;
	});
	nextTick(() => {
		detailDialogRef.value?.resetFields();
	});
};

const filterName = (key: any) => {
	if (key === 'interfaceName') {
		return '接口名称';
	} else if (key === 'method') {
		return '请求方式';
	} else if (key === 'requestUrl') {
		return '请求URL';
	} else if (key === 'requestBody') {
		return '请求体';
	} else if (key === 'responseBody') {
		return '响应体';
	} else if (key === 'servicesStatus') {
		return '服务状态';
	} else if (key === 'remarks') {
		return '备注';
	} else if (key === 'createTime') {
		return '创建时间';
	} else {
		// 不匹配就删除
		// console.log(.key, '名称');
	}
};

// 复制
const copyText = (row: any, text: string) => {
	if (row == '请求URL') {
		navigator.clipboard
			.writeText(text)
			.then(() => {
				useMessage().success('复制成功');
			})
			.catch(() => {});
	}
};

// 暴露变量 只有暴漏出来的变量 父组件才能使用
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.dialog-footer {
	display: flex;
	justify-content: center;
}

.blue-card {
	margin: 5px;
	padding: 10px;
	border-radius: 8px;
	background: #eaf1ff;
}
table {
	background: #ffffff;
	width: 100%;
	color: #333333;
	font-size: 14px;
	border-collapse: collapse;
}
tr {
	text-align: center;
	width: 120px;
	padding: 4px;
	box-sizing: border-box;
	border: 1px solid #ddd;
	line-height: 24px;
}
td {
	text-align: left;
	width: 120px;
	padding: 4px;
	box-sizing: border-box;
	border: 1px solid #ddd;
	line-height: 24px;
}
td:nth-child(1) {
	// max-width: 120px !important;
	text-align: center;
	background-color: #f3efef;
}

.stock-table .first-column {
	width: 40px !important;
}
.stock-table .second-column {
	width: 100px !important;
	white-space: normal;
	word-break: break-all;
}
</style>
